<template>
  <div class="app-container">
     <el-form :inline="true" :model="filters">
      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      <el-form-item>
        <el-input v-model="filters.name" :placeholder="filters.placeholder"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">
          <i class="el-icon-search" />
        </el-button>
    </el-form-item>
     </el-form>
    <el-table v-loading="listLoading" ref="membersTable" :data="memberList" @selection-change="handleSelectionChange" border fit  highlight-current-row >
      <el-table-column type="index" prop="checked" width="55" v-if="checkPermission(['engineer'])">
        <template slot-scope="scope">
          <el-checkbox :checked="scope.row.checked" @change="handleChecked(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" width="150"></el-table-column>
      <el-table-column label="职务" prop="post" align="center"  width="150"></el-table-column>
      <el-table-column label="人员" prop="job" align="center"  width="150" min-width="100">
        <template slot-scope="scope">
          <el-tag type='success' v-if="scope.row.job == '组长'">组长</el-tag>
          <el-tag v-else-if="scope.row.job == '副组长'">副组长</el-tag>
          <el-tag v-else type="info">组员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="职责" prop="duty"></el-table-column>
      <!-- <el-table-column label="操作" fixed="right" width="300" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="handleUpdate(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!--编辑界面-->
    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="Form" :rules="FormRules" ref="dataForm">
        <el-form-item label="人员" prop="job" width="100%">
          <el-select v-model="Form.job" placeholder="选择项目类型">
            <el-option v-for="item in jobCodeOptions" :key="item.job" :label="item.job" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name" width="100%">
          <el-input v-model="Form.name"></el-input>
        </el-form-item>
        <el-form-item label="职责" prop="duty" width="100%">
          <el-input v-model="Form.duty"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contact" width="100%">
          <el-input v-model="Form.contact"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
      </div>
    </el-dialog> -->

  </div>
</template>
<script>
import checkPermission from "@/utils/permission"; // 权限判断函数
import ToolBar from "@/views/layout/components/ToolBar";
import { getProjectCustomerMemberList, createProjectCustomerMember, deleteProjectCustomerMember } from "@/api/projectCustomerMember";

export default {
  components: { ToolBar },

  data() {
    return {
      filters: {
        name: "",
        placeholder: "人员名称"
      },
      id: this.$route.params.id,
      listLoading: false,
      memberList: [],
      multipleSelection: []
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    checkPermission,
    //返回任务进度列表
    goBack() {
      this.$router.push({
        path: "/task/project/progress/" + this.id
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.membersTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.membersTable.clearSelection();
      }
    },

    handleChecked(row) {
      if(row.checked){
        deleteProjectCustomerMember({ projectId: this.id,memberId:row.id}).then()
      }
      else{
        createProjectCustomerMember({ projectId: this.id,memberId:row.id}).then()
      }
      row.checked=!row.checked
   },
    getList() {
      getProjectCustomerMemberList({ projectId: this.id }).then(response => {
        this.memberList = response.data;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCreate() {},

    //显示编辑界面
    handleUpdate(index, row) {
      this.Form = Object.assign(this.Form, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },
    //编辑数据
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.Form);
          updateMember(tempData).then(() => {
            this.getList();
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
  }
};
</script>

